<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 源数据


        let person = {
                name: '张三',
                age: 1
            }
            // 模拟vue3中响应式
            // window.Proxy  内置的构造函数
            //  Proxy代理  Reflect 反射 修改 
            // 代理数据
            //模拟Vue3中实现响应式
            //#region 
            // const p = new Proxy(person, {
            //有人读取p的某个属性时调用
            // get(target, propName) {
            //         console.log(`有人读取了p身上的${propName}属性`)
            //         return Reflect.get(target, propName)
            //     },
            //     //有人修改p的某个属性、或给p追加某个属性时调用
            //     set(target, propName, value) {
            //         console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
            //         Reflect.set(target, propName, value)
            //     },
            //     //有人删除p的某个属性时调用
            //     deleteProperty(target, propName) {
            //         console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
            //         return Reflect.deleteProperty(target, propName)
            //     }
            // })
            //#endregion







        //模拟vue2 中实现响应式
        // 先定义一个空对象

        // let p = {}

        // // 监听自定义属性
        // Object.defineProperty(p, 'name', {
        //     configurable: true,
        //     get() { //有人读取name时调用
        //         return person.name
        //     },
        //     set(value) { //有人修改name时调用
        //         console.log('有人修改name,我监听到了，更新视图');
        //         person.name = value
        //     }
        // })
        // Object.defineProperty(p, 'age', {
        // get() { //有人读取age时调用
        //         return person.age
        //     },
        //     set(value) { //有人修改age时调用
        //         console.log('有人修改age,我监听到了，更新视图');
        //         person.age = value
        //     }
        // })
    </script>
</body>

</html>

</html>